import { judgeUnit } from '@/utils'
import type { ECBasicOption } from 'echarts/types/dist/shared'
// 修改后的引入方式（默认的引入导出方式没有暴露echarts.graphic.LinearGradient相关功能）
import * as echarts from 'echarts'
// 流量图表Options
const traffic = (xAxisData: any, series: any[]): ECBasicOption => {
  return {
    title: {
      textStyle: { color: '#000', fontSize: 14, fontWeight: 'normal' }
    },
    color: ['#1562FC', '#FF9710', '#48D18F'],
    textStyle: {
      color: '#999',
      fontSize: 12,
      fontWeight: 'normal'
    },
    tooltip: {
      trigger: 'axis',
      formatter(params: any[]) {
        let spans = `<p class="mb-0 mt-0 font-medium">${judgeUnit(
          params[0].name
        )}</p>`
        params.forEach((_element, i) => {
          spans += `
        <p class="flex items-center mb-0">
          <span class="w-2 h-2  inline-block" style="background: ${params[i].color}"></span>
          <span class="ml-2 flex items-center gap-x-2">
            <span>${params[i].seriesName}：</span><span>${params[i].value} </span>
          </span>
        </p>`
        })
        return spans
      }
    },
    legend: {
      data: ['新增节点', 'TCC安装数', '打包申请数'],
      icon: 'circle', //图例实心圆
      itemGap: 24,
      itemWidth: 8,
      itemHeight: 8,
      textStyle: {
        color: '#A4A4A4',
        fontSize: 14
      },
      left: 'center',
      bottom: '0'
    },
    grid: {
      left: '0.9%',
      right: '0%',
      bottom: '0%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: xAxisData,
      axisLabel: {
        // 刻度线标签颜色
        color: '#999999',
        formatter: (v: number) => judgeUnit(v)
      }
    },
    yAxis: {
      type: 'value',
      axisLabel: {
        // 刻度线标签颜色
        color: '#999999',
        formatter: (v: number) => v
      }
    },
    series: [
      {
        name: '计费流量',
        data: series[0],
        type: 'line',
        showSymbol: false,
        lineStyle: {
          // 阴影部分
          shadowOffsetX: 0, // 折线的X偏移
          shadowOffsetY: 2, // 折线的Y偏移
          shadowBlur: 6, // 折线模糊
          shadowColor: 'rgba(21,98,252,0.4)' //折线颜色
        }
      },
      {
        name: '命中流量',
        data: series[1],
        type: 'line',
        showSymbol: false,
        lineStyle: {
          // 阴影部分
          shadowOffsetX: 0, // 折线的X偏移
          shadowOffsetY: 2, // 折线的Y偏移
          shadowBlur: 6, // 折线模糊
          shadowColor: 'rgba(255,151,16,0.4)' //折线颜色
        }
      },
      {
        name: '回源流量',
        data: series[2],
        type: 'line',
        showSymbol: false,
        lineStyle: {
          // 阴影部分
          shadowOffsetX: 0, // 折线的X偏移
          shadowOffsetY: 2, // 折线的Y偏移
          shadowBlur: 6, // 折线模糊
          shadowColor: 'rgba(72,209,143,0.4)' //折线颜色
        }
      }
    ]
  }
}

// 带宽图表Options
const bandwidth = (xAxisData: any, series: any[]): ECBasicOption => {
  return {
    title: {
      textStyle: { color: '#000', fontSize: 14, fontWeight: 'normal' }
    },
    color: ['#1562FC', '#FF9710', '#48D18F'],
    textStyle: {
      color: '#999',
      fontSize: 12,
      fontWeight: 'normal'
    },
    tooltip: {
      trigger: 'axis',
      formatter(params: any[]) {
        const spans = `
        <p class="mb-0 mt-0 font-medium">${judgeUnit(params[0].name)}</p>
        <p class="flex items-center mb-0">
          <span class="w-2 h-2 rounded-md inline-block" style="background: ${
            params[0].color
          }"></span>
          <span class="ml-2 flex items-center gap-x-2">
            <span>${params[0].seriesName}：</span>
          </span>
        </p>
        `
        return spans
      }
    },
    legend: {
      data: [{ name: '峰值带宽', icon: 'circle' }],
      itemGap: 24,
      itemWidth: 8,
      itemHeight: 8,
      textStyle: {
        color: '#A4A4A4',
        fontSize: 14
      },
      left: 'right'
    },
    grid: {
      left: '0.9%',
      right: '0%',
      bottom: '0%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: xAxisData,
      axisLabel: {
        // 刻度线标签颜色
        color: '#999999',
        formatter: (v: number) => judgeUnit(v)
      }
    },
    yAxis: {
      type: 'value',
      axisLabel: {
        // 刻度线标签颜色
        color: '#999999',
        formatter: (v: number) => v
      }
    },
    series: [
      {
        name: '峰值带宽',
        data: series,
        type: 'line',
        showSymbol: false,
        lineStyle: {
          // 阴影部分
          shadowOffsetX: 0, // 折线的X偏移
          shadowOffsetY: 2, // 折线的Y偏移
          shadowBlur: 6, // 折线模糊
          shadowColor: 'rgba(21,98,252,0.4)' //折线颜色
        }
      }
    ]
  }
}

// 请求数图表Options
const request = (xAxisData: any, series: any[]): ECBasicOption => {
  return {
    title: {
      textStyle: { color: '#000', fontSize: 14, fontWeight: 'normal' }
    },
    color: ['#1562FC', '#FF9710', '#48D18F'],
    textStyle: {
      color: '#999',
      fontSize: 12,
      fontWeight: 'normal'
    },
    tooltip: {
      trigger: 'axis',
      formatter(params: any[]) {
        let spans = `<p class="mb-0 mt-0 font-medium">${judgeUnit(
          params[0].name
        )}</p>`
        params.forEach((_element, i) => {
          spans += `
        <p class="flex items-center mb-0">
          <span class="w-2 h-2 rounded-md inline-block" style="background: ${params[i].color}"></span>
          <span class="ml-2 flex items-center gap-x-2">
            <span>${params[i].seriesName}：</span><span>${params[i].value} </span>
          </span>
        </p>`
        })
        return spans
      }
    },
    legend: {
      data: [
        { name: '请求数', icon: 'circle' },
        { name: '命中数', icon: 'circle' }
      ],
      itemGap: 24,
      itemWidth: 8,
      itemHeight: 8,
      textStyle: {
        color: '#A4A4A4',
        fontSize: 14
      },
      left: 'right'
    },
    grid: {
      left: '0.9%',
      right: '0%',
      bottom: '0%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: xAxisData,
      axisLabel: {
        // 刻度线标签颜色
        color: '#999999',
        formatter: (v: number) => judgeUnit(v)
      }
    },
    yAxis: {
      type: 'value',
      axisLabel: {
        // 刻度线标签颜色
        color: '#999999'
        // formatter: (v: number) => byteConvertSite(v, 'B')
      }
    },
    series: [
      {
        name: '请求数',
        data: series[0],
        type: 'line',
        showSymbol: false,
        lineStyle: {
          // 阴影部分
          shadowOffsetX: 0, // 折线的X偏移
          shadowOffsetY: 2, // 折线的Y偏移
          shadowBlur: 6, // 折线模糊
          shadowColor: 'rgba(21,98,252,0.4)' //折线颜色
        }
      },
      {
        name: '命中数',
        data: series[1],
        type: 'line',
        showSymbol: false,
        lineStyle: {
          // 阴影部分
          shadowOffsetX: 0, // 折线的X偏移
          shadowOffsetY: 2, // 折线的Y偏移
          shadowBlur: 6, // 折线模糊
          shadowColor: 'rgba(255,151,16,0.4)' //折线颜色
        }
      }
    ]
  }
}

// 独立ip访问数图表Options
const independent = (xAxisData: any, series: any[]): ECBasicOption => {
  return {
    title: {
      textStyle: { color: '#000', fontSize: 14, fontWeight: 'normal' }
    },
    color: ['#1562FC', '#FF9710', '#48D18F'],
    textStyle: {
      color: '#999',
      fontSize: 12,
      fontWeight: 'normal'
    },
    tooltip: {
      trigger: 'axis',
      formatter(params: any[]) {
        const spans = `
        <p class="mb-0 mt-0 font-medium">${judgeUnit(params[0].name)}</p>
        <p class="flex items-center mb-0">
          <span class="w-2 h-2 rounded-md inline-block" style="background: ${
            params[0].color
          }"></span>
          <span class="ml-2 flex items-center gap-x-2">
            <span>${params[0].seriesName}：</span><span>${
          params[0].value
        }</span>
          </span>
        </p>
        `
        return spans
      }
    },
    legend: {
      data: [{ name: '独立ip访问数', icon: 'circle' }],
      itemGap: 24,
      itemWidth: 8,
      itemHeight: 8,
      textStyle: {
        color: '#A4A4A4',
        fontSize: 14
      },
      left: 'right'
    },
    grid: {
      left: '0.9%',
      right: '0%',
      bottom: '0%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: xAxisData,
      axisLabel: {
        // 刻度线标签颜色
        color: '#999999',
        formatter: (v: number) => judgeUnit(v)
      }
    },
    yAxis: {
      type: 'value',
      axisLabel: {
        // 刻度线标签颜色
        color: '#999999'
      }
    },
    series: [
      {
        name: '独立ip访问数',
        data: series,
        type: 'line',
        showSymbol: false,
        lineStyle: {
          // 阴影部分
          shadowOffsetX: 0, // 折线的X偏移
          shadowOffsetY: 2, // 折线的Y偏移
          shadowBlur: 6, // 折线模糊
          shadowColor: 'rgba(21,98,252,0.4)' //折线颜色
        }
      }
    ]
  }
}

// 请求数图表Options
const hitRate = (xAxisData: any, series: any[]): ECBasicOption => {
  return {
    title: {
      textStyle: { color: '#000', fontSize: 14, fontWeight: 'normal' }
    },
    color: ['#1562FC', '#FF9710', '#48D18F'],
    textStyle: {
      color: '#999',
      fontSize: 12,
      fontWeight: 'normal'
    },
    tooltip: {
      trigger: 'axis',
      formatter(params: any[]) {
        let spans = `<p class="mb-0 mt-0 font-medium">${judgeUnit(
          params[0].name
        )}</p>`
        params.forEach((_element, i) => {
          spans += `
        <p class="flex items-center mb-0">
          <span class="w-2 h-2 rounded-md inline-block" style="background: ${params[i].color}"></span>
          <span class="ml-2 flex items-center gap-x-2">
            <span>${params[i].seriesName}：</span><span>${params[i].value} %</span>
          </span>
        </p>`
        })
        return spans
      }
    },
    legend: {
      data: [
        { name: '请求命中率', icon: 'circle' },
        { name: '流量命中率', icon: 'circle' }
      ],
      itemGap: 24,
      itemWidth: 8,
      itemHeight: 8,
      textStyle: {
        color: '#A4A4A4',
        fontSize: 14
      },
      left: 'right'
    },
    grid: {
      left: '0.9%',
      right: '0%',
      bottom: '0%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: xAxisData,
      axisLabel: {
        // 刻度线标签颜色
        color: '#999999',
        formatter: (v: number) => judgeUnit(v)
      }
    },
    yAxis: {
      name: '百分比',
      type: 'value',
      position: 'left',
      nameTextStyle: {
        color: '#000'
        // backgroundColor
        // formatter: (v: number) => byteConvertSite(v, 'B')
      }
    },
    series: [
      {
        name: '请求命中率',
        data: series[0],
        type: 'line',
        showSymbol: false,
        lineStyle: {
          // 阴影部分
          shadowOffsetX: 0, // 折线的X偏移
          shadowOffsetY: 2, // 折线的Y偏移
          shadowBlur: 6, // 折线模糊
          shadowColor: 'rgba(21,98,252,0.4)' //折线颜色
        }
      },
      {
        name: '流量命中率',
        data: series[1],
        type: 'line',
        showSymbol: false,
        lineStyle: {
          // 阴影部分
          shadowOffsetX: 0, // 折线的X偏移
          shadowOffsetY: 2, // 折线的Y偏移
          shadowBlur: 6, // 折线模糊
          shadowColor: 'rgba(255,151,16,0.4)' //折线颜色
        }
      }
    ]
  }
}

//首页概览-响应代码-双线条
const overview = (
  xAxisData: any,
  series: any[],
  unit: string = 'day'
): ECBasicOption => {
  return {
    title: {
      textStyle: { color: '#000', fontSize: 14, fontWeight: 'normal' }
    },
    color: ['#FF7777', '#3AC78C', '#3478F6'],
    textStyle: {
      color: '#999',
      fontSize: 12,
      fontWeight: 'normal'
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        // 设置指示线
        type: 'cross', // 默认为直线，可选为：'line' | 'shadow'
        axis: 'x',
        label: {
          precision: 'auto',
          formatter: function (params) {
            // 判断是x轴或者y轴，设置对应的值
            if (params.axisDimension == 'x') {
              return judgeUnit(params.value, unit)
            } else {
              return (+params.value).toFixed(1)
            }
          },
          backgroundColor: '#487BFF',
          margin: 6
        },
        crossStyle: {
          width: 0
        }
      },

      formatter(params: any[]) {
        let spans = `<p class="mb-0 mt-0 font-medium">${judgeUnit(
          params[0].name,
          unit
        )}</p>`
        params.forEach((_element, i) => {
          spans += `
        <p class="flex items-center mb-0">
          <span class="w-[6px] h-[6px]  inline-block" style="background: ${params[i].color}"></span>
          <span class="ml-2 flex items-center gap-x-2">
            <span>${params[i].seriesName}：</span><span>${params[i].value} </span>
          </span>
        </p>`
        })
        return spans
      }
    },
    legend: {
      data: ['新增节点数', 'TCC安装数', '打包申请数'],
      icon: 'circle', //图例实心圆
      itemGap: 24, //图例每项之间的间隔
      itemWidth: 8,
      itemHeight: 8,
      textStyle: {
        color: '#A4A4A4',
        fontSize: 14
      },
      left: 'center',
      bottom: '0'
    },
    grid: {
      left: '2%',
      right: '3%',
      bottom: '10%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: xAxisData,
      axisLabel: {
        // 刻度线标签颜色
        color: '#545454',
        margin: 11.26,
        formatter: (v: number) => judgeUnit(v, unit)
      },
      axisLine: {
        lineStyle: {
          color: '#E7E7E7'
        }
      },
      axisTick: {
        show: true // 显示坐标轴刻度线 默认
      }
    },
    yAxis: {
      type: 'value',
      axisLine: {
        lineStyle: {
          color: '#272729', //x轴的颜色
          width: 8 //轴线的宽度
        }
      },
      axisLabel: {
        // 刻度线标签颜色
        color: '#999999',
        formatter: (v: number) => v
      },
      splitLine: {
        lineStyle: {
          //虚线
          type: 'dashed',
          color: '#E9E9E9',
          width: 0.5
        }
      }
    },

    series: [
      {
        name: '新增节点数',
        data: series[0],
        type: 'line',
        showSymbol: false,
        smooth: 0.4,
        // stack: 'Total',//设置图表不堆叠
        lineStyle: {
          // 阴影部分
          shadowOffsetX: 1, // 折线的X偏移
          shadowOffsetY: 7, // 折线的Y偏移
          shadowBlur: 4, // 折线模糊
          shadowColor: '#FF7777' //折线颜色
        },
        emphasis: {
          focus: 'series',
          color: '#eb547c',
          borderColor: '#eb547c'
        },
        areaStyle: {
          //面积样式
          opacity: 0.9,
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: '#eb547c'
            },
            {
              offset: 1,
              color: 'rgb(1, 191, 236)'
            }
          ])
        }
      },
      {
        name: 'TCC安装数',
        data: series[1],
        type: 'line',
        showSymbol: false,
        smooth: 0.4,
        emphasis: {
          focus: 'series'
        },
        // stack: 'Total',
        lineStyle: {
          // 阴影部分
          shadowOffsetX: 1, // 折线的X偏移
          shadowOffsetY: 7, // 折线的Y偏移
          shadowBlur: 4, // 折线模糊
          shadowColor: '#3AC78C ' //折线颜色
        },
        areaStyle: {
          opacity: 0.9,
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: '#3AC78C'
            },
            {
              offset: 1,
              color: 'rgb(1, 191, 236)'
            }
          ])
        }
      },
      {
        name: '打包申请数',
        data: series[2],
        type: 'line',
        showSymbol: false,
        smooth: 0.4, //折线图弧度
        emphasis: {
          focus: 'series'
        },
        // stack: 'Total',//y轴数值合计
        lineStyle: {
          // 阴影部分
          shadowOffsetX: 1, // 折线的X偏移
          shadowOffsetY: 7, // 折线的Y偏移
          shadowBlur: 4, // 折线模糊
          shadowColor: '#3478F6' //折线颜色
        },
        areaStyle: {
          opacity: 0.9,
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: '#3478F6'
            },
            {
              offset: 1,
              color: 'rgb(111, 191, 236)'
            }
          ])
        }
      }
    ]
  }
}
export default {
  traffic,
  bandwidth,
  request,
  independent,
  hitRate,
  overview
}
